<template>
  <div id="app">
    <el-container>
      <el-header>
        <top-header></top-header>
      </el-header>
      <el-container>
        <el-aside>
          <left-side></left-side>
        </el-aside>
        <el-main>
          <main-side></main-side>
        </el-main>
      </el-container>
      <el-footer>
        <music-com></music-com>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import LeftSide from './components/LeftSide/LeftSide.vue'
import MainSide from './components/MainSide.vue'
import MusicCom from './components/MusicCom/MusicCom.vue'
import TopHeader from './components/TopHeader/TopHeader.vue'

export default {
  name:'App',
  data() {
    return {
      isColor:"",
      cookie:localStorage.cookie
    }
  },
  components: {
    TopHeader,
    LeftSide,
    MainSide,
    MusicCom
  },
  created() {
    
  },
}
</script>

<style lang="scss">
@import './style/main.scss';

  .el-header {
    text-align: center;
    padding: 0 !important;
  }

  .el-container {
    height: calc(100vh - 140px);
  }

  .el-footer {
    height: 80px !important;
    padding: 0 !important;
  }
  
  .el-aside {
    text-align: left;
    padding: 0;
    width: 215px !important;
    height: calc(100vh - 140px);
  }

  .el-aside::-webkit-scrollbar {
    display: none;
    width: 7px;
  }

  .el-main::-webkit-scrollbar {
    width: 7px;
  }

  .el-aside:hover::-webkit-scrollbar,
  .el-main::-webkit-scrollbar {
    display: block;
  }

  .el-aside::-webkit-scrollbar-thumb,
  .el-main::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #ccc;
  }

  .el-aside::-webkit-scrollbar-track,
  .el-main::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #fff;
  }
  
  .el-main {
    text-align: center;
    height: calc(100vh - 140px);
    padding: 0 !important;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
